<template>
  <div class="addMarketingGoods" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead :title="title" background-color="linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%)"></myHead>
    <!-- 顶部类型-->
    <div v-if="typeId != 3" class="time border">
      <div class="name">活动开始时间</div>
      <div class="content">
        <van-cell :title="startDate" @click="showStart = true" />
      </div>
    </div>
    <div v-if="typeId != 3" class="time">
      <div class="name">活动结束时间</div>
      <div class="content">
        <van-cell :title="endDate" @click="showEnd = true" />
      </div>
    </div>
    <div v-if="typeId == 3">
      <div class="input">
        <div class="name">优惠券面值</div>
        <div class="content">
          <label>
            <input name="" placeholder="请输入优惠券面值"></input>
          </label>
        </div>
      </div>
      <div class="input">
        <div class="name">发放优惠券数量</div>
        <div class="content">
          <label>
            <input name="" placeholder="优惠券数量"></input>
          </label>
        </div>
      </div>
    </div>
    <div v-if="typeId == 4" style="position: relative;">
      <div class="fill">
        <div class="name">满减条件</div>
        <div class="condition">
          <label class="skill" v-for="index of fill_num" :key="index">
            满<input name="" placeholder="" type="number"></input>元减<input type="number" name="" placeholder=""></input>元
          </label>
        </div>
      </div>
      <div class="fill_add" @click="fill_add()">添加</div>
      <div class="join">
        <div class="name">参与方式</div>
        <div class="content">
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="1" icon-size="0.09rem"  checked-color="#FF0000">全店商品</van-radio>
            <van-radio name="2" icon-size="0.09rem"  checked-color="#FF0000">部分商品参加</van-radio>
          </van-radio-group>
        </div>
      </div>
    </div>
    <router-link to="/views/Business/chooseGoods" tag="div" class="choose">
      <div class="name">选择商品</div>
      <div class="content">
        <div class="chooseBtn">+ 选择商品</div>
        <div class="chooseNum">已选择<span>{{chooseNum}}件</span>宝贝</div>
      </div>
    </router-link>
    <!-- 底部输入框-->
    <div v-if="typeId == 0">
      <div class="input">
        <div class="name">抢购价格</div>
        <div class="content">
          <label>
            <input name="" placeholder="设置抢购价格"></input>
          </label>
        </div>
      </div>
      <div class="input">
        <div class="name">抢购数量</div>
        <label>
          <input name="" placeholder="设置允许抢购的商品数量"></input>
        </label>
      </div>
      <div class="input">
        <div class="name">每人限抢</div>
        <label>
          <input name="" placeholder="每人限抢1件"></input>
        </label>
      </div>
    </div>
    <div v-if="typeId == 1">
      <div class="input">
        <div class="name">成团人数</div>
        <div class="content">
          <label>
            <input name="" placeholder="设置成团人数，至少2人"></input>
          </label>
        </div>
      </div>
      <div class="input">
        <div class="name">成团有效时间</div>
        <label>
          <input name="" placeholder="设置成团有效时间"></input>
        </label>
      </div>
      <div class="input">
        <div class="name">团购价</div>
        <label>
          <input name="" placeholder="设置团购价格"></input>
        </label>
      </div>
      <div class="input">
        <div class="name">每人限购</div>
        <label>
          <input name="" placeholder="每人限领1件"></input>
        </label>
      </div>
    </div>
    <div v-if="typeId == 2">
      <div class="input">
        <div class="name">商品原价</div>
        <div class="content">
          <label>
            <input name="" placeholder="商品原价"></input>
          </label>
        </div>
      </div>
      <div class="input">
        <div class="name">砍后价</div>
        <label>
          <input name="" placeholder="砍价后商品价格"></input>
        </label>
      </div>
      <div class="input">
        <div class="name">帮砍人数</div>
        <label>
          <input name="" placeholder="人数需设置在1-100数值范围内"></input>
        </label>
      </div>
      <div class="input">
        <div class="name">每次砍价范围</div>
        <label class="skill">
          <input name="" placeholder="" type="number"></input>元~<input type="number" name="" placeholder=""></input>元
        </label>
      </div>
    </div>
    <div v-if="typeId == 3">
      <div class="input">
        <div class="name">优惠券使用时间</div>
        <div class="content">
          <van-cell :title="RangeDate" @click="showRange = true" />
        </div>
      </div>
      <div class="input">
        <div class="name">使用条件</div>
        <label class="skill">
          消费满<input name="" placeholder="" type="number"></input>元可使用
        </label>
      </div>
      <div class="input">
        <div class="name">每人限领</div>
        <label>
          <input name="" placeholder="每人限领1张"></input>
        </label>
      </div>
    </div>
    <div v-if="typeId == 5">
      <div class="input">
        <div class="name">设置折扣</div>
        <div class="content">
          <label>
            <input name="" placeholder="设置商品促销折扣，如：5折"></input>
          </label>
        </div>
      </div>
      <div class="input">
        <div class="name">每人限购</div>
        <label>
          <input name="" placeholder="每人限购1件"></input>
        </label>
      </div>
    </div>
    <div class="save" @click="save()">保存</div>
    <van-calendar v-model="showStart" @confirm="onConfirmStart" />
    <van-calendar v-model="showEnd" @confirm="onConfirmEnd" />
    <van-calendar v-model="showRange" type="range" @confirm="onConfirmRange" />
  </div>
</template>

<script>
  import Vue from 'vue';
  import myHead from "../../components/BusinessComponents/lib/myHead";
  import { Calendar,RadioGroup, Radio } from 'vant';

  Vue.use(Calendar);
  Vue.use(RadioGroup);
  Vue.use(Radio);

  export default {
    name: "posting",
    data(){
      return {
        title:"营销活动",
        fill_num:1,
        chooseNum:0,
        goodsId:[],
        radio: '1',
        typeId:false,
        startDate: '选择日期',
        endDate: '选择日期',
        RangeDate: '选择使用期限',
        showStart: false,
        showEnd: false,
        showRange: false,
      }
    },
    components:{
      myHead,
    },
    methods: {
      formatDate(date) {
        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      },
      onConfirmStart(date) {
        this.showStart = false;
        this.startDate = this.formatDate(date);
      },
      onConfirmEnd(date) {
        this.showEnd = false;
        this.endDate = this.formatDate(date);
      },
      onConfirmRange(date) {
        this.showRange = false;
        const [start, end] = date;
        this.RangeDate = `${this.formatDate(start)} ~ ${this.formatDate(end)}`;
      },
      fill_add(){
        this.fill_num++
      },
      save(){
        console.log(this.chooseNum);
      }
    },
    mounted() {
      bus.$on("goods",data=>{
        this.goodsId = data.arr;
        this.chooseNum = data.arr.length;
        console.log(this.chooseNum);
        console.log(this.goodsId);
        bus.$off('goods');
      });
    },
    created() {
      if(this.$route.query.id){
        this.typeId = this.$route.query.id;
      }
      if(this.$route.query.id == 0){
        this.title = "创建抢购商品"
      }else if(this.$route.query.id == 1){
        this.title = "拼团活动"
      }else if(this.$route.query.id == 2){
        this.title = "砍价活动"
      }else if(this.$route.query.id == 3){
        this.title = "创建优惠券"
      }else if(this.$route.query.id == 4){
        this.title = "满减活动"
      }else if(this.$route.query.id == 5){
        this.title = "打折促销"
      }
    },
    watch:{
      chooseNum(){
        console.log(this.chooseNum);
      }
    }
  }
</script>

<style scoped>
  .addMarketingGoods{
    background: #F5F5F5;
    padding-top: .48rem;
  }
  .addMarketingGoods input{
    border: none;
    width: 100%;
  }
  .addMarketingGoods input::placeholder{
    color: #A5A5A5;
  }
  .addMarketingGoods .txt input{
    width: 100%;
    border: none;
    padding: .12rem .02rem .24rem;
    font-size: .14rem;
  }
  .addMarketingGoods .txt input::placeholder{
    color: #A5A5A5;
  }
  .addMarketingGoods .border{
    border-bottom: 1px solid #EBEBEB;
  }

  .addMarketingGoods .time,.addMarketingGoods .input,.addMarketingGoods .choose{
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    align-items: center;
    font-size: .14rem;
    padding: 0 .17rem;
    height: .48rem;
  }
  .addMarketingGoods .join{
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    align-items: center;
    font-size: .14rem;
    padding: 0 .17rem;
    height: .48rem;
  }
  .addMarketingGoods .join .name{
    margin-right: .16rem;
  }
  .addMarketingGoods .content{
    flex-grow: 1;
    font-size: .14rem;
    color: #A5A5A5;
  }
  .addMarketingGoods .another img{
    width: .06rem;
  }
  .addMarketingGoods .choose{
    margin: .1rem 0;
  }
  .addMarketingGoods .choose .content{
    display: flex;
    align-items: center;
  }
  .addMarketingGoods .choose .content div{
    font-size: .1rem;
    margin-left: .1rem;
  }
  .addMarketingGoods .choose .content div:nth-child(1){
    border:1px solid #FD2F33;
    border-radius: .04rem;
    padding: .02rem .04rem;
    background: #EDEDED;
    color: #FF2227;
  }
  .addMarketingGoods .choose .content div span{
    color: #FF2227;
  }
  .addMarketingGoods .input{
    border-bottom: 1px solid #EBEBEB;
  }
  .addMarketingGoods .input .name{
    margin-right: .17rem;
  }
  .addMarketingGoods .input label{
    flex-grow: 1;
  }
  .addMarketingGoods .input label input{
    width: 100%;
    border:none;
    font-size: .14rem;
  }
  .addMarketingGoods .fill_add{
    position: absolute;
    top: .15rem;
    right: .16rem;
    font-size: .14rem;
    color: #F0A706;
  }
  .addMarketingGoods .fill{
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    font-size: .14rem;
    padding: .15rem .17rem;
    margin: .1rem 0;
  }
  .addMarketingGoods .fill .condition{
    flex-grow: 1;
    padding-left: .16rem;
  }
  .addMarketingGoods .input,.fill .skill{
    display: flex;
  }
  .addMarketingGoods .fill .skill{
    margin-bottom: .05rem;
  }
  .addMarketingGoods .input .skill input,.addMarketingGoods .fill .skill input{
    width: .25rem;
    border: 1px solid #FB4B4B;
    margin: 0 .05rem;
    border-radius: .04rem;
    background-color: #F5F5F5;
    padding: 0 .1rem;
  }
  .addMarketingGoods .save{
    width: 3.4rem;
    height: .48rem;
    background: linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    border-radius: .24rem;
    line-height: 0.48rem;
    text-align: center;
    margin: .22rem auto 0;
    font-size: .15rem;
    color: #ffffff;
  }
  >>>.van-cell{
    font-size: .15rem;
    line-height: normal;
  }
  >>>.van-icon-success::before{
    display: none;
  }
  >>>.van-dialog__header{
    line-height:.24rem;
    padding-top:.24rem;
  }
  >>>.van-dialog__content{
    margin: .16rem .12rem .23rem;
  }
  >>>.van-dialog{
    width: 3.2rem;
    font-size: .16rem;
    border-radius:.16rem;
  }
  >>>.van-button{
    font-size: .16rem;
    height: .5rem;
    line-height: .48rem;
  }
  .addMarketingGoods .dialog{
    width: calc(100% - 0.18rem);
    height: .36rem;
    border: none;
    background: #F6F6F6;
    border-radius: .08rem;
    padding: 0 .09rem;
    font-size: .14rem;
  }
</style>

